<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影推荐 | {{ title }}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <link rel="icon" type="image/x-icon" href="#">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/viewer.min.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div class="max-w-[1440px] mx-auto px-6">
    <nav class="flex items-center justify-between h-16 mb-8">
        <div class="flex items-center space-x-8">
            <a class="text-xl font-['Pacifico']" href="#">Movie Recommend</a>
            <div class="flex space-x-6">
                <a href="{{ url_for('user.index') }}"
                   class="nav-item {% if request.endpoint == 'user.index' %}active{% endif %} text-gray-900 hover:text-primary">主页</a>
                <a href="{{ url_for('user.tags') }}"
                   class="nav-item {% if request.endpoint == 'user.tags' %}active{% endif %} text-gray-600 hover:text-primary">标签</a>
                {% if current_user.is_admin %}
                    <a href="{{ url_for('admin.index') }}"
                       class="nav-item text-gray-600 hover:text-primary">后台管理</a>
                {% endif %}
            </div>
        </div>
        {% if current_user.is_authenticated %}
            <a class="px-2 py-2 text-white bg-primary hover:bg-primary/90 !rounded-button"
               href="{{ url_for('user.logout') }}">
                Log Out
            </a>
        {% else %}
            <a class="px-2 py-2 text-white bg-primary hover:bg-primary/90 !rounded-button"
               href="{{ url_for('user.login') }}">
                Log In
            </a>
        {% endif %}
    </nav>
    <div class="container-body">
        <!-- Flash Messages -->
        <div id="alertContainer">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        {% if category == 'success' %}
                            <div class="alert-item fixed top-20 left-1/2 transform -translate-x-1/2 w-96 bg-green-50 border border-green-200 rounded-lg shadow-lg z-50 p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-check-circle text-green-500"></i>
                                        <p class="text-green-700">{{ message }}</p>
                                    </div>
                                    <button onclick="this.parentElement.parentElement.remove()"
                                            class="text-green-500 hover:text-green-700">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        {% else %}
                            <div class="alert-item fixed top-20 left-1/2 transform -translate-x-1/2 w-96 bg-amber-50 border border-amber-200 rounded-lg shadow-lg z-50 p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <i class="fas fa-exclamation-triangle text-amber-500"></i>
                                        <p class="text-amber-700">{{ message }}</p>
                                    </div>
                                    <button onclick="this.parentElement.parentElement.remove()"
                                            class="text-amber-500 hover:text-amber-700">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>

        {% block content %}{% endblock %}
    </div>

    <!-- 确认弹窗 -->
    <div id="confirmModal" class="hidden fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg w-80 p-6">
            <div class="flex items-center justify-center gap-3 mb-6">
                <i class="fas fa-question-circle text-amber-500 text-2xl"></i>
                <p id="confirmMessage" class="text-gray-700"></p>
            </div>
            <div class="flex justify-center space-x-4">
                <button onclick="handleConfirm(false)"
                        class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-button">
                    取消
                </button>
                <button onclick="handleConfirm(true)"
                        class="px-4 py-2 text-white bg-primary hover:bg-primary/90 rounded-button">
                    确认
                </button>
            </div>
        </div>
    </div>
</div>
{% block scripts %}
    <script>
        function openAlert(message, type = 'warning') {
            const alertContainer = document.getElementById('alertContainer');
            const alertDiv = document.createElement('div');

            // 根据类型设置不同的样式
            const styles = {
                warning: {
                    bg: 'bg-amber-50',
                    border: 'border-amber-200',
                    text: 'text-amber-700',
                    icon: 'fa-exclamation-triangle text-amber-500',
                    buttonText: 'text-amber-500 hover:text-amber-700'
                },
                success: {
                    bg: 'bg-green-50',
                    border: 'border-green-200',
                    text: 'text-green-700',
                    icon: 'fa-check-circle text-green-500',
                    buttonText: 'text-green-500 hover:text-green-700'
                }
            };

            const style = styles[type] || styles.warning;

            alertDiv.className = `alert-item fixed top-20 left-1/2 transform -translate-x-1/2 w-96 ${style.bg} border ${style.border} rounded-lg shadow-lg z-50 p-4`;
            alertDiv.innerHTML = `
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <i class="fas ${style.icon}"></i>
                            <p class="${style.text}">${message}</p>
                        </div>
                        <button onclick="this.parentElement.parentElement.remove()" class="${style.buttonText}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                `;
            alertContainer.appendChild(alertDiv);

            setTimeout(() => {
                alertDiv.remove();
            }, 2000);
        }

        // 页面加载完成后自动为flash消息添加自动关闭功能
        document.addEventListener('DOMContentLoaded', function () {
            const alerts = document.querySelectorAll('.alert-item');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.remove();
                }, 2000);
            });
        });

        /**
         * 确认弹窗
         */
        let confirmResolve = null;

        function showConfirm(message) {
            return new Promise((resolve) => {
                const modal = document.getElementById('confirmModal');
                const messageEl = document.getElementById('confirmMessage');
                messageEl.textContent = message;
                modal.classList.remove('hidden');
                confirmResolve = resolve;
            });
        }

        function handleConfirm(confirmed) {
            const modal = document.getElementById('confirmModal');
            modal.classList.add('hidden');
            if (confirmResolve) {
                confirmResolve(confirmed);
                confirmResolve = null;
            }
        }
    </script>
    <script>
        /**
         * 通用fetch请求方法
         * @param {string} url - 请求地址
         * @param {object} data - 请求数据
         * @param {object} options - 配置项
         * @param {string} options.method - 请求方法，默认POST
         * @param {string} options.redirect - 跳转链接
         * @param {number} options.delay - 跳转延迟时间(ms)，默认600
         * @returns {Promise}
         */
        async function fetchRequest(url, data, options = {}) {
            const {method = 'POST', redirect, delay = 600, callback} = options;

            try {
                const response = await fetch(url, {
                    method: method,
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                });
                const result = await response.json();

                if (result.error) {
                    openAlert(result.error);
                    return Promise.reject(result.error);
                }

                if (result.message) {
                    openAlert(result.message, 'success');
                }

                if (redirect) {
                    setTimeout(() => {
                        // 执行回调函数
                        if (callback && typeof callback === 'function') {
                            callback(result);
                        }
                        window.location.href = redirect;
                    }, delay);
                }

                return result;
            } catch (error) {
                openAlert('请求失败');
                return Promise.reject(error);
            }
        }
    </script>
{% endblock %}
</body>
</html>